	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	
    <script type="text/javascript">

	var nd = new Date();
	var TimezoneOffset = nd.getTimezoneOffset() * 60000;
	var interval = new Array();
	var dataSourse = "graph-data";
	var allGraph = new Array();
	var allData;
	var dataReadInterval = 1000;
	//dataSourse = "data.js"; // for testing
	

	function getData(type) {
	if (type == 1) source = dataSourse;
	else source = "graph-form"
	var newData = $.ajax({
			url: source, 
			async: false
			}).responseText;
		if (newData == undefined){
			if(type == 1) allData = "";
			return "";
		}
		newData = newData.split("|"); //diffrent measurements/graph
		for(var i = 0; i < newData.length; i++){
			if(newData[i].length > 0){
				newData[i] = newData[i].split(":"); //title from data
				newData[i][1] = newData[i][1].split(";"); //diferent data/settings
				if(type == 1){
					for(var z = 0; z < newData[i][1].length; z++){
						if(newData[i][1][z].length > 0){
							newData[i][1][z] = newData[i][1][z].split(","); //data from timestemp
							newData[i][1][z][0] = Number(newData[i][1][z][0]) - TimezoneOffset;
							newData[i][1][z][1] = Number(newData[i][1][z][1]);
						}
						else{
							newData[i][1].splice(z,1);
							z--;
						}
					}
				}
			}
			else{
				newData.splice(i,1);
				i--;
			}
		}
		if(type == 1){
			allData = newData;
		}
		else{
			return newData;
		}
	}
	function drawChart(graphID, anime) {
		dataList = getValues(allGraph[graphID]["data"], allGraph[graphID]["maxDisplay"]);
		//Options in http://api.highcharts.com/
		$('#graph' + graphID).highcharts({
			title: {
				text: allGraph[graphID]["title"]//'Measurements from all motes'
			},
			xAxis: {
				type: 'datetime',
				dateTimeLabelFormats: {
					month: '%e. %b',
					year: '%b'
				}
			},
			yAxis: {
				title: {
					text: allGraph[graphID]["yAxis"]
				}
			},
			plotOptions: {
				series: {
					animation: {
						duration: anime ? 2000 : 0
					}
				}
			},
			chart:{
				type: 'spline',
				animation: {
					duration: allGraph[graphID]["interval"]*0.5,   // As close to interval as possible.
					easing: 'linear'  // Important: this makes it smooth
				}
			},
			tooltip: {
				formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
						Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y;
				}
			},
			series: dataList
		});
		for(var j = 0; j < dataList.length; j++){
			allGraph[graphID]["lastData"][j] = new Array();
			allGraph[graphID]["lastData"][j][0] = dataList[j]["data"][dataList[j]["data"].length - 1][0];
			allGraph[graphID]["lastData"][j][1] = dataList[j]["data"].length
		}
	}
	function setChart() {
		var dataList;
		for(var i = 0; i < allGraph.length; i++){
				var container = document.getElementById('container');
				var graphdiv = document.createElement('div');
				var buttondiv = document.createElement('div');
				graphdiv.setAttribute('id','graph' + i);
				graphdiv.setAttribute('class','graph');
				buttondiv.innerHTML = 	"<p>%BUTTONS%</p>"; // BUTTONS use i as id
				buttondiv.setAttribute('class','graphbutton');
				container.appendChild(graphdiv);
				container.appendChild(buttondiv);
				drawChart(i, true);
		}
		setTimeout(function (){FirstStartGraph(allGraph.length)}, 1000);
    }
	function FirstStartGraph(count){
	for(var i = 0; i < count; i++) StartGraph(i);
	}
	function StartGraph(graphID){
		interval[graphID] = setInterval(function (){updateChart(graphID)}, allGraph[graphID]["interval"]);
		allGraph[graphID]["play"] = true;
	}
	function StopGraph(graphID){
		clearInterval(interval[graphID]);
		allGraph[graphID]["play"] = false;
	}
	function button(graphID, button){
		if (!allGraph[graphID]["play"]){
			button.innerHTML = "Pause";
			updateChart(graphID);
			StartGraph(graphID);
		}
		else{
			button.innerHTML = "Play";
			StopGraph(graphID);
		}
	}
	function updateChart(graphID){
		var dataList, j, add;
		dataList = getValues(allGraph[graphID]["data"], allGraph[graphID]["maxDisplay"]);
		if(dataList.length > 0){
			for(var i = 0; i < dataList.length; i++){
				if (allGraph[graphID]["lastData"][i] != undefined){
					if (allGraph[graphID]["lastData"][i][0] != dataList[i]["data"][dataList[i]["data"].length - 1][0]){
						j = dataList[i]["data"].length - 1;
						for(; j > -1 && allGraph[graphID]["lastData"][i][0] != dataList[i]["data"][j][0]; j--); //compare timestamp
						add = (dataList[i]["data"].length - 1) - j;
						allGraph[graphID]["lastData"][i][1] += add;
						add = allGraph[graphID]["lastData"][i][1] - allGraph[graphID]["maxDisplay"];
						if(add > 0) allGraph[graphID]["lastData"][i][1] = allGraph[graphID]["maxDisplay"];
						j++; //j was the last shown
						if(add < 0){drawChart(graphID, false); return;} //temp solution for add problem
						for(; j < dataList[i]["data"].length; j++){
							$('#graph' + graphID).highcharts().series[i].addPoint(
								[
									dataList[i]["data"][j][0],
									dataList[i]["data"][j][1]
								],
								false, // if redraw now
								true //add > 0 // if delete oldest point
							);
							add --;
						}
						allGraph[graphID]["lastData"][i][0] = dataList[i]["data"][dataList[i]["data"].length - 1][0];
					}
				}
				else{
					drawChart(graphID, false); // Is some extra data - need to redraw all
					return; 
				}
			}
			$('#graph' + graphID).highcharts().redraw();
		}
	}
	function getValues(data, width){
		var dataList = new Array();
		var z = 0;
		if (data == "all"){
			for(var i = 0; i < allData.length; i++){
				dataList[i] = {};
				dataList[i]["name"] = allData[i][0];
				dataList[i]["data"] = allData[i][1];
				if(width < dataList[i]["data"].length){
					dataList[i]["data"].splice(0,dataList[i]["data"].length - width);
				}
			}
			return dataList
		}
		else{
			for(var i = 0; i < allData.length; i++){
				for(var j = 0; j < data.length; j++){
					if (allData[i][0] == data[j]){
						dataList[z] = {};
						dataList[z]["name"] = allData[i][0];
						dataList[z]["data"] = allData[i][1];
						if(width < dataList[z]["data"].length){
							dataList[z]["data"].splice(0,dataList[z]["data"].length - width);
						}
						z += 1;
						break;
					}	
				}
			}
			return dataList
		}
	}
	function initGraph(){
		var settings = getData(2),minInterval = 100000;
		for(var i = 0; i < settings.length; i++){
			if(settings[i][1][2] == "all"){
				settings[i][2] = "all";
				continue;
			}
			settings[i][2] = new Array();
			for(var j = 2; j < settings[0][1].length; j++){
				settings[i][2][j-2] = settings[i][1][j];
			}
		}
		for(var i = 0; i < settings.length; i++){
			allGraph[i] = {};
			allGraph[i]["lastData"] = new Array();
			allGraph[i]["maxDisplay"] = 20;
			if(isNaN(Number(settings[i][1][1]))) settings[i][1][1] = 1000;
			allGraph[i]["interval"] = Number(settings[i][1][1]);
			if(settings[i][1][1] < minInterval) minInterval = Number(settings[i][1][1]);
			allGraph[i]["play"] = false;
			allGraph[i]["title"] = settings[i][0];
			allGraph[i]["data"] = settings[i][2];
			allGraph[i]["yAxis"] = settings[i][1][0];
		}
		getData(1);
		setInterval(function (){getData(1)}, minInterval); //Update data in smallest interval
	}
	$(function (){
		initGraph();
		setChart();
	})
    </script>
